<template>
  <component is="a-modal" v-model:visible="visible" width="70%" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit">
    <a-spin :loading="spinLoading" tip="获取数据中" style="width: 100%;">
      <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
        <a-form-item label="售后ID" field="after_order_id">
          <a-input v-model="formData.after_order_id" placeholder="请输入" @blur="getData" />
        </a-form-item>
        <a-form-item label="售后类型" field="after_type">
          <sa-select v-model="formData.after_type" :data="TYPE"></sa-select>
        </a-form-item>
        <a-form-item label="操作密码" field="admin_pay_password">
          <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="谷歌验证码" field="google_code">
          <a-input v-model="formData.google_code" placeholder="请输入" />
        </a-form-item>
      </a-form>
      <div v-if="tableData && tableData.length > 0">
        <a-space>
          <a-button type="primary" size="mini" @click="add">添加</a-button>
        </a-space>
        <div style="height: 70vh;overflow: auto;">
          <a-table ref="crudRef" :data="tableData" :columns="columns" :pagination="false" :stripe="false">
            <template #goods_name="{ record }">
              <sa-select style="width: 60%;" v-model="record.order_goods_id" :data="goods_list"
                :fieldNames="{ value: 'id', label: 'goods_name' }"></sa-select>
            </template>
            <template #exchange_goods="{record}">
              <sa-select style="width: 60%;" v-model="record.sku" :data="select_list"
              :fieldNames="{ value: 'sku_text', label: 'name' }"></sa-select>
            </template>
            <template #operation="{ record, rowIndex }">
              <a-button class="red_color" type="primary" size="mini" mode="round" @click="del(rowIndex)">删除</a-button>
            </template>
          </a-table>
        </div>
      </div>
    </a-spin>
  </component>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import funApi from '@/api/message/tool'
import SaSelect from '@cps/sa-select/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import tool from '@/utils/tool'
const spinLoading = ref(false)
const emit = defineEmits(["success"]);
const formRef = ref()
const visible = ref(false);
const title = ref('')
const loading = ref(false);
const formData = reactive({
  after_order_id: '',
  after_type:2,
  admin_pay_password: '',
  google_code: '',
})
const TYPE = [
  { value: 1, title: '退货(已收货)' },
  {value:2,title:'换货'}
]
const rules = ref({
  after_order_id: [{ required: true, message: '请输入' }],
  after_type: [{ required: true, message: '请选择' }],
  admin_pay_password: [{ required: true, message: '请输入' }],
  google_code: [{ required: true, message: '请输入' }],
});
const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100, align: 'center' },
  { title: '商品名称', slotName: 'goods_name', width: 180, align: 'center' },
  { title: '更换商品', slotName: 'exchange_goods', width: 180, align: 'center' },
  { title: '数量', dataIndex: 'num', width: 180, align: 'center' },
  { title: '操作', slotName: 'operation', width: 100, align: 'center', },
])
const open = async (data) => {
  visible.value = true;
  formRef.value.resetFields()
  title.value = '修改换货售后记录'
  getParams()
}
const tableData = ref([])
const select_list = ref([])
const goods_list=ref([])
const getData = async () => {
  tableData.value = []
  goods_list.value = []
  try {
    spinLoading.value = true
    const { data } = await funApi.tool_edit_ex_record_search({ after_order_id: formData.after_order_id })
    tableData.value = data.sku_list
    goods_list.value = data.goods_list
    select_list.value=data.change_goods_list
    spinLoading.value = false
  } catch (err) {
    spinLoading.value = false
  }
}
const add = () => {
  tableData.value.push({ order_goods_id: goods_list.value[0].id, num: 1, })
}
const del = (idx) => {
  tableData.value?.splice(idx, 1)
}
const submit = async (done) => {
  console.log('222',tableData.value);
  const validate = await formRef.value?.validate()
  if (!validate) {
    let after_order_sku_id = []
    let order_goods_id = []
    let sku=[]
    let flag = false
    if (tableData.value && tableData.value.length > 0) {
      tableData.value.forEach((itm, idx) => {
        after_order_sku_id.push(itm.id?itm.id:0)
        order_goods_id.push(itm.order_goods_id)
        sku.push(itm.sku)
        if (idx == tableData.value.length - 1) {
          flag = true
        }
      })
    }
    if (flag == true) {
      try {
        loading.value = true
        let data = { ...formData } 
        data.after_order_sku_id = after_order_sku_id
        data.order_goods_id = order_goods_id
        data.sku=sku
        let result = await funApi.tool_edit_exchange_record(data)
        if (result.code === 200) {
          Message.success('操作成功')
          emit('success')
          done(true)
        }
        setTimeout(() => {
          loading.value = false
        }, 500)
      } catch {
        loading.value = false
        done(false)
      }
    }

  }
  done(false)

}
const paramsData = ref({})
const getParams = async () => {
  const { data } = await funApi.tool_edit_exchange_record_config()
  paramsData.value = { ...data }
}
defineExpose({ open });
</script>